<template>
  <div>
  <Tabs  @on-click="handleTabClick">
    <TabPane label="进行中" name="name1"></TabPane>
    <TabPane label="已完成" name="name2"></TabPane>
  </Tabs>
  <Table stripe border height="425" :columns="columns1" :data="currentData" :row-class-name="rowClassName" style=""></Table>
  <Page show-elevator :total="dataCount" :pageSize="pageSize" :current="pageIndex" @on-change="changepage" @on-page-size-change="pagesize" style="text-align: right;"></Page>
  <Modal
    v-model="modal1"
    title="个人详细信息"
    @on-ok="ok"
    @on-cancel="cancel">
    <p>姓名：{{userName}}</p>
    <p v-if="gender === '0'">性别：男</p>
    <p v-else>性别：女</p>
    <p>国籍：{{nation}}</p>
    <p>身份证号：{{idNumber}}</p>
    <p>银行卡号：{{cardNumber}}</p>
    <p>每月固定收入（税前）：{{income}}</p>
    <p>居住地：{{detailaddress}}</p>
    <p>工作职位：{{job}}</p>
    <p>手机号：{{mobilephone}}</p>
  </Modal>
  </div>
</template>
<script>
let testData = {
  histories: [
  ]
}
export default {
  data () {
    return {
      params: {
        type: '1',
        pageNum: this.pageIndex,
        pageSize: this.pageSize
      },
      userName: '',
      gender: '',
      nation: '',
      idNumber: '',
      cardNumber: '',
      income: '',
      detailaddress: '',
      job: '',
      mobilephone: '',
      dataCount: [], // 初始化信息总条数
      pageSize: 8, // 每页条数
      modal1: false,
      columns1: [
        {
          title: '用户编号',
          key: 'customer_id',
          width: 85
        },
        {
          title: '姓名',
          key: 'userName',
          width: 65
        },
        {
          title: '身份证号码',
          key: 'idNumber'
        },
        {
          title: '贷款编号',
          key: 'loan_id',
          width: 85
        },
        {
          title: '贷款金额',
          key: 'loan_amount',
          width: 90
        },
        {
          title: '贷款时间',
          key: 'loan_start_time',
          width: 100
        },
        {
          title: '贷款期数',
          key: 'installment_num',
          width: 85
        },
        {
          title: '到期时间',
          key: 'expire_date',
          width: 100
        },
        {
          title: '还款方式',
          key: 'repayment_type',
          width: 85
        },
        {
          title: '剩余本金',
          key: 'remain_principal',
          width: 85
        },
        {
          title: '操作',
          width: 70,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  //  this.Editadd(params.index) 弹框编辑
                  //  params.index 当前下标
                  on: {
                    click: () => {
                      console.log(`before${this.dataCount}`)
                      // 打开弹窗
                      this.modal1 = true
                      console.log(this.currentData[params.index].customer_id)
                      // 向后端请求数据
                      this.$api.getUserById(this.currentData[params.index]).then((res) => {
                        if (!res.error) {
                          console.log(res.data)
                          this.userName = res.data.userName
                          this.gender = res.data.gender
                          this.nation = res.data.nation
                          this.idNumber = res.data.idNumber
                          this.cardNumber = res.data.cardNumber
                          this.income = res.data.income
                          this.detailaddress = res.data.detailaddress
                          this.mobilephone = res.data.mobilephone
                          this.job = res.data.job
                        } else {
                          console.log(this.$Message.error(res.msg))
                        }
                      })
                      console.log(`after${this.dataCount}`)
                    }
                  }
                },
                '查看'
              )
            ])
          }
        }
      ],
      currentData: [],
      name1: [
        {

        }
      ],
      name2: [
        {

        }
      ]
    }
  },
  methods: {
    /**
     * 刷新页面请求
    * */
    refresh () {
      this.getData(this.params)
    },
    /**
     * @params:
     * */
    getData (params) {
      params.pageNum = 1
      params.pageSize = this.pageSize
      this.$api.getLoanList(params).then((res) => {
        if (!res.error) {
          console.log('success')
          console.log(res.data.list)
          this.currentData = res.data.list// 获得表格数据
          this.dataCount = res.data.recordCount // 获得总数据条数
        } else {
          console.log('failed')
          console.log(this.$Message.error(res.msg))
        }
      })
    },
    rowClassName (row, index) {
      if (index % 2 === 0) {
        return 'ivu-table-stripe-even'
      } else {
        return 'ivu-table-stripe-odd'
      }
    },
    handleTabClick (name) {
      // 这里应该是修改表格显示数据即可
      if (name === 'name1') {
        this.params.type = '1'
        this.getData(this.params)
      } else {
        this.params.type = '0'
        this.getData(this.params)
        // return this.$router.push({path: '/credit-end'})
      }
    },
    ok () {
      this.$Message.info('确定')
    },
    cancel () {
      this.$Message.info('取消')
    },
    // 获取历史记录信息
    handleListApproveHistory () {
      // 保存取到的所有数据
      this.ajaxHistoryData = testData.histories
      this.dataCount = testData.histories.length
      if (testData.histories.length < this.pageSize) {
        this.currentData = this.ajaxHistoryData
      } else {
        this.currentData = this.ajaxHistoryData.slice(0, this.pageSize)
      }
    },
    changepage (index) {
      this.params.pageNum = index
      this.params.pageSize = this.pageSize
      this.$api.getLoanList(this.params).then((res) => {
        if (!res.error) {
          console.log('success')
          this.currentData = res.data.list// 获得表格数据
          this.dataCount = res.data.recordCount // 获得总数据条数
          console.log(this.currentData)
        } else {
          console.log('failed')
          console.log(this.$Message.error(res.msg))
        }
      })
    }
  },
  created () {
    // this.handleListApproveHistory()
    this.getData(this.params)
  }
}
</script>
<style>
.ivu-table th{
  color: #ebf7ff;
  background-color: #353535;
  }
/*偶数行*/
.ivu-table-stripe-even td{
  background-color: #FFFFFF!important;
}
/*奇数行*/
.ivu-table-stripe-odd td{
  /*background-color: #ececec!important;*/
}
</style>
